<template>
  <div class="full" v-loading="loading" element-loading-text="用例拼命运行中，请稍等..."
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)">
    <div>
      <!--面包屑-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>接口测试</el-breadcrumb-item>
        <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!--卡片-->
      <el-card class="box-card">
        <el-row :gutter="20">
          <!--搜索框-->
          <el-col :span="6">
            <el-input placeholder="请输入项目名称" v-model="queryParams.name" clearable @clear="getProjectList" @keyup.enter.native="getProjectList">
              <el-button slot="append" icon="el-icon-search" @click="getProjectList" class="search"></el-button>
            </el-input>
          </el-col>
          <!--创建按钮-->
          <el-col :span="4">
            <el-button type="primary" @click="openAddProjectDialog" plain>创建项目</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table :data="projectList" :cell-style="cellStyle" border stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="项目名称" prop="name"></el-table-column>
          <el-table-column label="项目领导" prop="leader"></el-table-column>
          <el-table-column label="开发人员" prop="developer"></el-table-column>
          <el-table-column label="测试人员" prop="tester"></el-table-column>
          <el-table-column label="项目简介" prop="description"></el-table-column>
          <el-table-column label="创建时间" prop="create_time"></el-table-column>
          <el-table-column label="操作" min-width="130px">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="openRunProjectDialog(scope.row)" plain>运 行</el-button>
              <el-button type="warning" size="mini" @click="openEditProjectDialog(scope.row)" plain>编 辑</el-button>
              <el-button type="danger" size="mini" @click="deleteThisProject(scope.row.id)" plain>删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.p"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="queryParams.s"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
      <!--新建项目对话框-->
      <el-dialog title="创建项目" :visible.sync="addProjectDialogVisible" width="40%" :append-to-body="true"
                 :close-on-click-modal="false" :close-on-press-escape="false" @close="addDialogClose">
        <!--项目表单-->
        <el-form :model="addProjectForm" status-icon :rules="addProjectRule" ref="addProjectRef" label-width="90px">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="addProjectForm.name" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="项目领导" prop="leader">
            <el-input v-model="addProjectForm.leader" placeholder="请输入项目领导"></el-input>
          </el-form-item>
          <el-form-item label="开发人员" prop="developer">
            <el-input v-model="addProjectForm.developer" placeholder="请输入开发人员"></el-input>
          </el-form-item>
          <el-form-item label="测试人员" prop="tester">
            <el-input v-model="addProjectForm.tester" placeholder="请输入测试人员"></el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="description">
            <el-input type="textarea" v-model="addProjectForm.description" placeholder="请输入项目描述"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addProjectDialogClose">取 消</el-button>
          <el-button type="primary" @click="addProject">确 定</el-button>
        </span>
      </el-dialog>
      <!--编辑项目对话框-->
      <el-dialog title="编辑项目" :visible.sync="editProjectDialogVisible" width="40%" :append-to-body="true"
                 :close-on-click-modal="false" :close-on-press-escape="false" @close="editDialogClose">
        <!--项目表单-->
        <el-form :model="editProjectForm" status-icon :rules="editProjectRule" ref="editProjectRef" label-width="90px">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="editProjectForm.name" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="项目领导" prop="leader">
            <el-input v-model="editProjectForm.leader" placeholder="请输入项目领导"></el-input>
          </el-form-item>
          <el-form-item label="开发人员" prop="developer">
            <el-input v-model="editProjectForm.developer" placeholder="请输入开发人员"></el-input>
          </el-form-item>
          <el-form-item label="测试人员" prop="tester">
            <el-input v-model="editProjectForm.tester" placeholder="请输入测试人员"></el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="description">
            <el-input type="textarea" v-model="editProjectForm.description" placeholder="请输入项目描述"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editProjectDialogClose">取 消</el-button>
          <el-button type="primary" @click="editThisProject">确 定</el-button>
        </span>
      </el-dialog>
      <!--运行项目对话框-->
      <el-dialog title="运行项目" :visible.sync="runProjectDialogVisible" width="20%" :append-to-body="true"
                 :close-on-click-modal="false" :close-on-press-escape="false" @close="runDialogClose">
        <el-form :model="runProjectForm" status-icon :rules="runProjectRule" ref="runProjectRef" label-width="90px">
          <el-form-item label="运行环境" prop="env_id">
            <el-select v-model="runProjectForm.env_id" placeholder="请选择运行环境">
              <el-option
                v-for="env in environmentList"
                :key="env.id"
                :label="env.name"
                :value="env.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="runProjectDialogClose">取 消</el-button>
        <el-button type="primary" @click="runThisProject">开 始</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getEnvironmentNames,
  getProjects,
  createProject,
  editProject,
  deleteProject,
  runProject
} from '../../api/api'

export default {
  created () {
    this.getProjectList()
  },
  data () {
    return {
      projectList: [],
      total: 0,
      queryParams: {
        p: 1,
        s: 10,
        name: ''
      },
      tmpName: '',
      addProjectDialogVisible: false,
      editProjectDialogVisible: false,
      addProjectForm: {
        name: '',
        leader: '',
        developer: '',
        tester: '',
        description: ''
      },
      editProjectForm: {},
      projectId: 0,
      projectObject: [],
      addProjectRule: {
        name: [
          { required: true, message: '项目名称不能为空！', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符！', trigger: 'blur' }
        ],
        leader: [
          { required: true, message: '项目领导不能为空！', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符！', trigger: 'blur' }
        ]
      },
      editProjectRule: {
        name: [
          { required: true, message: '项目名称不能为空！', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符！', trigger: 'blur' }
        ],
        leader: [
          { required: true, message: '项目领导不能为空！', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符！', trigger: 'blur' }
        ]
      },
      // 运行
      runProjectDialogVisible: false,
      runProjectForm: {
        env_id: ''
      },
      runProjectRule: {
        env_id: [
          { required: true, message: '运行环境不能为空！', trigger: 'blur' }
        ]
      },
      loading: false,
      environmentList: [],
      runProjectId: ''
    }
  },
  methods: {
    // 获取环境名称列表
    getEnvironmentNameList () {
      getEnvironmentNames()
        .then(response => {
          if (response.data.code !== 0) return this.$message.error('获取环境名称列表失败！')
          this.environmentList = response.data.data
        })
    },
    // 打开运行项目对话框
    openRunProjectDialog (projectInfo) {
      this.runProjectId = projectInfo.id
      this.getEnvironmentNameList()
      this.runProjectDialogVisible = true
    },
    // 运行项目
    runThisProject () {
      this.$refs.runProjectRef.validate(valid => {
        if (!valid) return
        this.loading = true
        this.runProjectDialogVisible = false
        runProject(this.runProjectId, this.runProjectForm)
          .then(response => {
            if (response.data.code !== 0) {
              this.loading = false
              return this.$message.error(response.data.message.run)
            }
            this.loading = false
            this.$message.success(response.data.message.run)
            this.runProjectId = ''
            this.runProjectForm = { env_id: '' }
          })
      })
      this.getProjectList()
    },
    // 运行对话框关闭
    runDialogClose () {
      this.$refs.runProjectRef.resetFields()
      this.environmentList = []
    },
    // 运行项目对话框关闭
    runProjectDialogClose () {
      this.runProjectDialogVisible = false
      this.runDialogClose()
      this.runProjectId = ''
      this.runProjectForm = {
        env_id: ''
      }
    },
    // 获取项目列表
    getProjectList () {
      if (this.queryParams.name !== this.tmpName) {
        this.tmpName = this.queryParams.name
        this.queryParams.p = 1
      }
      getProjects(this.queryParams)
        .then(response => {
          if (response.data.code !== 0) return this.$message.error('获取项目列表失败！')
          this.projectList = response.data.data.results
          this.total = response.data.data.count
        })
    },
    // 监听size变化
    handleSizeChange (newSize) {
      this.queryParams.s = newSize
      this.getProjectList()
    },
    // 监听页码变化
    handleCurrentChange (newPage) {
      this.queryParams.p = newPage
      this.getProjectList()
    },
    // 打开创建项目对话框
    openAddProjectDialog () {
      this.addProjectDialogVisible = true
    },
    // 创建对话框关闭
    addDialogClose () {
      this.$refs.addProjectRef.resetFields()
      this.addProjectForm = {
        name: '',
        leader: '',
        developer: '',
        tester: '',
        description: ''
      }
    },
    // 创建项目对话框关闭处理
    addProjectDialogClose () {
      this.addProjectDialogVisible = false
      this.addDialogClose()
    },
    // 创建项目
    addProject () {
      this.$refs.addProjectRef.validate(valid => {
        if (!valid) return
        createProject(this.addProjectForm)
          .then(response => {
            if (response.data.code !== 0) return this.$message.error('创建项目失败！')
            this.$message.success('创建项目成功！')
            this.addProjectDialogClose()
            this.getProjectList()
          })
      })
    },
    // 打开编辑项目对话框
    openEditProjectDialog (projectInfo) {
      this.editProjectForm = { ...projectInfo }
      this.projectId = this.editProjectForm.id
      delete this.editProjectForm.id
      delete this.editProjectForm.create_time
      this.editProjectDialogVisible = true
    },
    // 编辑对话框关闭
    editDialogClose () {
      this.$refs.editProjectRef.resetFields()
    },
    // 编辑项目对话框关闭处理
    editProjectDialogClose () {
      this.editProjectDialogVisible = false
      this.editDialogClose()
    },
    // 编辑项目
    editThisProject () {
      this.$refs.editProjectRef.validate(valid => {
        if (!valid) return
        editProject(this.projectId, this.editProjectForm)
          .then(response => {
            if (response.data.code !== 0) return this.$message.error('编辑项目失败！')
            this.$message.success('编辑项目成功！')
            this.editProjectDialogClose()
            this.getProjectList()
          })
      })
    },
    // 删除项目
    deleteThisProject (projectId) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProject(projectId).then(response => {
          if (response.data.code !== 0) return this.$message.error('删除项目失败！')
          this.$message.success('删除项目成功！')
          this.total -= 1
          if (this.total === (this.queryParams.p - 1) * this.queryParams.s && this.total !== 0) {
            this.queryParams.p -= 1
          }
          this.getProjectList()
        })
      }).catch(err => err)
    },
    // 表格样式
    cellStyle (data) {
      if (data.column.label === '项目名称') {
        return 'color: #409EFF'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .el-dialog__body {
    padding: 20px 35px 10px 20px;
  }
</style>
